<template>
    <div class="main">
        <section>
            <div class="warn-text">
                <el-alert title="温馨提示：账号初始密码为：abcd1234" type="warning" :closable="false"></el-alert>
            </div>
            <el-table :data="list" v-loading="listLoading" header-row-class-name="table-header" element-loading-text="给我一点时间" border highlight-current-row>
                <el-table-column align="center" label="供应商名称" prop="companyName" min-width="100" show-overflow-tooltip></el-table-column>
                <el-table-column align="center" label="联系人" prop="contacts" width="200"></el-table-column>
                <el-table-column align="center" label="手机号" prop="contactPhoneNumber" width="150"></el-table-column>
                <el-table-column align="center" label="用户名" prop="username" width="150"></el-table-column>
                <el-table-column align="center" label="营业执照号" prop="businessLicense" min-width="100" show-overflow-tooltip>
                    <template slot-scope="scope">
                        <img class="businessLicense" :src="scope.row.businessLicense"/>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="操作" width="100">
                    <template slot-scope="scope">
                        <el-button type="primary" size="mini" plain @click="showEdit(scope.row)">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page.sync="listQuery.offset"
                    :page-sizes="[10, 20, 50, 100]"
                    :page-size="listQuery.limit"
                    background
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="listTotal">
            </el-pagination>
            <el-dialog title="编辑" :visible.sync="dialogVisible">
                <el-form :model="formData" :rules="formRules" size="medium" ref="form" label-width="120px">
                    <el-form-item label="供应商名称:" prop="companyName">
                        <span>{{formData.companyName}}</span>
                    </el-form-item>
                    <el-form-item label="用户名:" prop="username">
                        <el-input v-model="formData.username" placeholder="用户名" maxlength="60"></el-input>
                    </el-form-item>
                    <el-form-item label="联系人:" prop="contacts">
                        <el-input v-model="formData.contacts" placeholder="联系人" maxlength="60"></el-input>
                    </el-form-item>
                    <el-form-item label="联系电话:" prop="contactPhoneNumber">
                        <el-input v-model="formData.contactPhoneNumber" placeholder="联系电话" maxlength="60"></el-input>
                    </el-form-item>
                    <el-form-item label="营业执照:" prop="businessLicense">
                        <el-upload
                                class="avatar-uploader"
                                :action="upladUrl"
                                name="file"
                                :show-file-list="false"
                                :before-upload="beforeUpload"
                                :on-success="uploadSuccess">
                            <img v-if="formData.businessLicense" :src="formData.businessLicense" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="save" :loading="btnLoading">保存</el-button>
                    <el-button @click="dialogVisible = false">取消</el-button>
                </div>
            </el-dialog>
        </section>
    </div>
</template>
<script>
    export default {
        name: 'merchantList',
        data() {
            return {
                listLoading: false,
                listQuery: {
                    offset: 1,
                    limit: 10,
                    isPage: 1
                },
                list: [],
                listTotal: 0,

                dialogVisible: false,
                btnLoading: false,
                formData: {},
                formRules: {
                    'username': [{required: true, message: '请输入', trigger: 'change'}],
                    'contactPhoneNumber': [{required: true, message: '请输入', trigger: 'change'}],
                    'businessLicense': [{required: true, message: '请输入', trigger: 'change'}]
                }
            }
        },
        created(){
            this.getList();
        },
        methods: {
            getList(){
                this.listLoading = true;
                this.request({
                    url: '/bsnl-order/merchant/list',
                    method: 'get',
                    params: this.listQuery
                }).then(({rows, total}) => {
                    this.list = rows;
                    this.listTotal = total;
                    this.listLoading = false;
                }).catch(err => {
                    console.log(err);
                    this.list = [];
                    this.listTotal = 0;
                    this.listLoading = false;
                });
            },
            handleSizeChange (value) {
                this.listQuery.limit = value;
                this.getList()
            },
            handleCurrentChange(val){
                this.listQuery.offset = val;
                this.getList();
            },
            showEdit(row){
                this.formData = Object.assign({}, row);
                this.$nextTick(()=>{
                    this.$refs.form.clearValidate()
                });
                this.dialogVisible = true;
                this.btnLoading = false;
            },
            beforeUpload(file) {
                if (!/image/.test(file.type)) {
                    this.$message.error('只能上传图片');
                    return false;
                }
                if (file.size > 1024 * 1024) {
                    this.$message.error('图片不能大于1M');
                    return false;
                }
            },
            uploadSuccess(res) {
                this.formData.businessLicense = this.replaceImgUrl(res.filePath);
            },
            save(){
                this.$refs.form.validate(valid => {
                    if (!valid) {
                        return false;
                    }
                    this.btnLoading = true;
                    this.request({
                        url: '/bsnl-order/merchant/save',
                        method: 'post',
                        data: this.formData
                    }).then(() => {
                        this.btnLoading = false;
                        this.dialogVisible = false;
                        this.$message.success('保存成功');
                        this.getList();
                    }).catch(err => {
                        this.btnLoading = false;
                    });
                });
            }
        }
    }
</script>
<style>
    .warn-text{
        margin-bottom: 12px;
    }
    .businessLicense{
        max-width: 100px;
        max-height: 100px;
    }
</style>
